<script src="../../../dist/static/js/config.js"></script>
<template>
  <div class="register-page">
    <!--<headBar>-->
      <!--<div slot="xm-header-center">-->
        <!--<div class="xm-header-title" >注册</div>-->
      <!--</div>-->
      <!--<div slot="xm-header-right"></div>-->
    <!--</headBar>-->
    <steps step="1"></steps>
    <div class="xm-form-1">
      <div class="input-group flex border-bottom">
        <label>账号</label>
        <input type="text" v-model="username" class="flex-1"  placeholder="请输入登录账号"  autocomplete="off">
        <i class="close" v-show="username!=''" @click="username=''"></i>
        <p class="error" v-show="tips.username">{{tips.username}}</p>
      </div>
      <div class="input-group flex border-bottom">
        <label>密码</label>
        <input type="password" v-model="password" class="flex-1" placeholder="请输入登录密码" autocomplete="off">
        <i class="close" v-show="password!=''" @click="password=''"></i>
        <p class="error" v-show="tips.password">{{tips.password}}</p>
      </div>
      <div class="input-group flex border-bottom">
        <label>确认密码</label>
        <input type="password" v-model="rePwd" class="flex-1"  placeholder="请再次输入密码"  autocomplete="off">
        <i class="close" v-show="rePwd!=''" @click="rePwd=''"></i>
        <p class="error" v-show="tips.rePwd">{{tips.rePwd}}</p>
      </div>
      <div class="input-group flex border-bottom">
        <label>手机号码</label>
        <input type="tel" v-model.number="phone" class="flex-1" placeholder="请输入手机号码" autocomplete="off">
        <i class="close" v-show="phone!=''" @click="phone=''"></i>
        <p class="error" v-show="tips.phone">{{tips.phone}}</p>
      </div>
      <div class="input-group code-group border-bottom flex">
        <label>验证码</label>
        <input type="text" v-model.trim="code" class="flex-1"  placeholder="请输入短信验证码" autocomplete="off">
        <i class="close" v-show="code!=''" @click="code=''"></i>
        <span class="code-phone" :class="{active: active}" @click="sendCode">{{count | second}}</span>
        <p class="error" v-show="tips.code">{{tips.code}}</p>
      </div>
      <div class="notice">
        <p class="error" v-show="tips.notice">{{tips.notice}}</p>
      </div>
      <a href="javascript:;" id="next" class="btn btn1 next marginCenter" @click="next">下一步</a>

      <div class="links">
        <router-link to="/home">返回首页</router-link>
        <router-link to="/login">已有账号？登录 >></router-link>
      </div>
    </div>
  </div>
</template>

<script>
    import steps from '../../components/steps/steps';
    import reg from './reg';

    export default {
        props: {
        },
        data() {
            return {
                username: '',
                password: '',
                rePwd: '',
                phone: '',
                code: '',
                count: '立即发送',
                active: false,
                tips: {
                    notice: null,
                    username: null,
                    password: null,
                    rePwd: null,
                    phone: null,
                    code: null,
                }
            }
        },
        methods: {
            next(){
                if(this.registerVerify()){
                    let param = {
                        username: this.username,
                        password: this.password,
                        mobile: this.phone,
                        code: this.code
                    };
                    register(param).then((data) => {
                        if(data.returnCode == '000000'){
                            this.$router.push({name: 'complete'});
                        }else{
                            this.tips.notice = data.errorMsg;
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },
            registerVerify(){
                this.tips = {
                    notice: null,
                    username: null,
                    password: null,
                    rePwd: null,
                    phone: null,
                    code: null
                };
                if(!reg.username.test(this.username)){
                    this.tips.username = '登录账号为5~12位数字、英文';
                    return false;
                }
                if(!reg.pwd.test(this.password)){
                    this.tips.password = '密码为6~16位2种以上字符组合';
                    return false;
                }
                if(this.rePwd !== this.password){
                    this.tips.rePwd = '两次输入密码不一致';
                    return false;
                }
                if(this.phone == '' || !reg.phone.test(this.phone)){
                    this.tips.phone = '请输入正确手机号码';
                    return false;
                }
                if(this.code == ''){
                    this.tips.code = '验证码不能为空';
                    return false;
                }
                return true;
            },
            sendCode(){
                if(this.count == '立即发送' && reg.phone.test(this.phone)){
                    getCode({phone: this.phone}).then((data)=>{
                        if(data.returnCode == '0000000'){
                            console.log('验证码发送成功');
                        }
                    })
                    this.count = 60;
                    this.countdown();
                }
            },
            countdown(){
                if(this.count > 0){
                    this.count--;
                    setTimeout(this.countdown, 1000);
                }else{
                    this.count = '立即发送';
                }
            }
        },
        filters: {
            second(val){
                if(typeof val == 'number'){
                    return val + 's';
                }
                return val;
            }
        },
        created() {

        },
        mounted(){
        },
        watch:{
            phone: function(newValue, oldValue){
                if(reg.phone.test(this.phone)){
                    this.active = true;
                }else{
                    this.active = false;
                }
            }
        },
        components: {
            steps
        }
    };
</script>
<style lang="less" scoped>
  @import "../login/login.less";
  @import "./register.less";
  .register-page .links{
    position: static;
    width: 100%;
    margin-top: .8rem;
    padding-bottom: .4rem;
  }
</style>
